<!-- 我的 -->

<template>
  <div class="mine">
    我的

    <tab-bar></tab-bar>
  </div>
</template>

<script>
import TabBar from "@/components/base/tab-bar/tab-bar";
import CrossLine from "@/components/base/cross-line/cross-line";

export default {
  components: {
    TabBar,
    CrossLine
  },
  data() {
    return {
      user: {}
    };
  },
  props: {},
  watch: {},
  methods: {
    gotoOrder(type) {
      this.$router.push(`/order/list/${type}`);
    },
    gotoAddress() {
      this.$router.push(`/address`);
    }
  },
  filters: {},
  computed: {},
  created() {},
  mounted() {},
  destroyed() {}
};
</script>

<style lang="scss" scoped>
@import "~@/assets/scss/base.scss";
@import "~@/assets/scss/const.scss";
@import "~@/assets/scss/mixin.scss";

.mine {
  width: 100%;
  height: 100%;
  background: $app-background-color;
  .top {
    display: flex;
    position: relative;
    width: 100%;
    background-color: cornflowerblue;
    .info {
      flex: 2;
      display: flex;
      flex-direction: row;
      margin-top: 15px;
      margin-bottom: 15px;
      .avatar-wrapper {
        width: 70px;
        height: 70px;
        margin-left: 20px;
        img {
          width: 70px;
          height: 70px;
          border-radius: 50%;
        }
      }
      .name-wrapper {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 55px;
        margin-top: 10px;
        margin-left: 20px;
        .name {
          font-size: 16px;
          color: #fff;
          font-weight: bold;
        }
        .desc {
          font-size: 16px;
          color: #fcfefe;
          i {
            font-size: 18px;
          }
        }
      }
    }
  }
  .important {
    width: 100%;
    background-color: #fff;
    .cross-item {
      &:last-child {
        border-bottom: none;
      }
    }
  }
  .minor {
    width: 100%;
    margin-top: 15px;
    margin-bottom: 15px;
    background-color: #fff;
    .cross-item {
      &:last-child {
        border-bottom: none;
      }
    }
  }
  ul.order-flows {
    display: flex;
    align-items: center;
    justify-content: space-around;
    > li {
      font-size: 14px;
      padding: 1em 0;
      line-height: 2em;
      color: #969896;
      text-align: center;
      img {
        @include icon(24px);
      }
    }
  }
  .order.cross-item > span.name {
    font-size: 18px;
    font-weight: bold;
  }
}
</style>
